<template>
	<view>
		<div id="mui-player" ref="videoRef">
		</div>
	</view>
</template>

<script>
	// https://blog.csdn.net/wax9092/article/details/124606003
	// https://www.jianshu.com/p/a779e82bacad/
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			// this.initVideo()
		},
		methods: {
			initVideo() {
					
					
				console.log("11111111111111111111111111111")
				
				// https://upyun.luckly-mjw.cn/Assets/media-source/example/media/index.m3u8
					
				this.player = plus.video.createVideoPlayer('mui-player', {
					src: 'https://amjc1tmal.xn--5kv91jiz2b.com/video/m3u8/2024/06/20/c2968e58/index.m3u8',
					top: '100px',
					left: '0px',
					width: '100%',
					height: '300px',
					position: 'absolute'
				});
				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.append(this.player)
				this.player.play()
				// 打开即全屏
				// this.player.requestFullScreen()
				// 监听全屏退出事件
				this.player.addEventListener("fullscreenchange", (e) => {
					// if(this.player.isFullScreen()){
					//     this.player.exitFullScreen()
					// }
					if (this.player) {
						this.player.close()
					}
				})
			
			},
		}
	}
</script>

<script module="JsSIP" lang="renderjs">
	import 'mui-player/dist/mui-player.min.css'
	import MuiPlayer from 'mui-player';
	import Hls from 'hls.js'

	export default {
		data() {
			return {
				liveVideo: null,
				show: false
			};
		},
		mounted() {
			setTimeout(() => {
				this.initLiveVideo()
			}, 100)
		},
		methods: {
			initLiveVideo() {
				this.liveVideo = new MuiPlayer({
					container: this.$refs.videoRef,
					src: 'https://amjc1tmal.xn--5kv91jiz2b.com/video/m3u8/2024/06/20/c2968e58/index.m3u8',
					poster: 'http://gips2.baidu.com/it/u=1649608662,1521733901&fm=3028&app=3028&f=JPEG&fmt=auto?w=2560&h=1920',
					// parse: {
					// 	type: 'hls',
					// 	loader: Hls,
					// 	config: {
					// 		debug: false,
					// 	},
					// },
					videoAttribute: [{
							attrKey: 'webkit-playsinline',
							attrValue: 'webkit-playsinline'
						},
						{
							attrKey: 'playsinline',
							attrValue: 'playsinline'
						},
						{
							attrKey: 'x5-video-player-type',
							attrValue: 'h5-page'
						}
					],
					pageHead: false,
					custom: {
						footerControls: [{
							slot: 'full-switch', // 对应定义的 slot 值
							click: function(e) { // 按钮点击事件回调
								console.log('cast screen button click...');
							},
							style: {}, // 自定义添加控件样式
						}]
					}
				});
			},
		},
		onUnload() {
			this.liveVideo.destroy()
		},
	}
</script>

<!-- https://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.html -->


<!-- https://blog.csdn.net/weixin_48364327/article/details/136906629?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-136906629-blog-134938522.235^v43^pc_blog_bottom_relevance_base6&spm=1001.2101.3001.4242.1&utm_relevant_index=1 -->